<form nz-form #organizationCreateOrEditForm="ngForm" (ngSubmit)="save()" autocomplete="off">
  <div class="modal-header">
    <div class="modal-title">
      <i class="anticon anticon-share-alt mr-sm"></i>
      <span *ngIf="organizationUnit.id">{{l("Edit")}}: {{organizationUnit.displayName}}</span>
      <span *ngIf="!organizationUnit.id&&!organizationUnit.parentId">{{l("NewOrganizationUnit")}}</span>
      <span
        *ngIf="organizationUnit.parentId&&organizationUnit.parentDisplayName">{{l('AddSubNodeForXParentNode',organizationUnit.parentDisplayName)}}</span>
    </div>
  </div>

  <fieldset>
    <nz-form-item nz-row>
      <nz-form-label nz-col [nzSm]="3" nzFor="DisplayName" nzRequired>
        {{l("NameOfThings")}}
      </nz-form-label>
      <nz-form-control nz-col [nzSm]="21" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-book">
          <input nz-input #organizationUnitDisplayName="ngModel" name="DisplayName"
            [(ngModel)]="organizationUnit.displayName" [placeholder]="l('NameOfThings')" required maxlength="128">
        </nz-input-group>

        <nz-form-explain *ngIf="organizationUnitDisplayName.control.dirty&&organizationUnitDisplayName.control.errors">
          <ng-container *ngIf="organizationUnitDisplayName.control.hasError('required')">{{l('ThisFieldIsRequired')}}
          </ng-container>
          <ng-container *ngIf="organizationUnitDisplayName.control.hasError('minlength')">{{l('MinLength')}}
          </ng-container>
          <ng-container *ngIf="organizationUnitDisplayName.control.hasError('maxlength')">{{l('MaxLength')}}
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </fieldset>

  <div class="modal-footer">
    <button nz-button [nzType]="'default'" type="button" (click)="close($event)" [disabled]="saving">
      <i class="anticon anticon-close-circle-o"></i> {{l("Cancel")}}
    </button>
    <button nz-button [nzType]="'primary'" type="submit" [disabled]="!organizationCreateOrEditForm.form.valid || saving"
      [nzLoading]="saving">
      <i class="anticon anticon-save" *ngIf="!saving"></i> {{l("Save")}}
    </button>
  </div>

</form>
